// 混入类方法,注意：生命周期中函数的代码可以合并，但是methods中函数的代码不能合并
import {debounce} from "./utils";
import BackTop from "components/content/backTop/BackTop";

export const itemListenerMixin = {
  components:{
  },
  methods: {
  },
  data() {
    return {
      itemImgListener:null,
      newRefresh:null
    }
  },
  mounted () {
    // 将会频繁调用的函数传递给防抖函数
    this.newRefresh=debounce(this.$refs.scroll.refresh,300)
    // 3.监听item中图片加载
    this.itemImgListener = () => {
      // console.log('111')
      this.newRefresh()
    }
    this.$bus.$on('itemImageLoad',
      // 封装一个函数，在执行某一个函数之前，搞一个定时器，让要执行的函数等一会再执行
      // 执行封装的防抖函数
      this.itemImgListener
    )
  }
}

// 返回顶部的按钮
export const backTopMixin = {
  components: {BackTop},
  data() {
    return {
      // 引用之后用于，默认不显示返回顶部按钮组件
      isShowBackTop:false,
    }
  },
  methods: {
    // 2监听返回顶部按钮点击事件
    backClick() {
      // 拿到scroll组件，再拿到scroll属性，调用scrollTo方法,此方案太长
      // 采用封装，在scroll中封装方法，直接调用
      // 在500毫秒内滚动到对应位置
      this.$refs.scroll.scrollTo1(0,0)
    },
    listenShowBackTop(position) {
      // 0.1判断backTop是否显示
      this.isShowBackTop = (-position.y) > 300
    }
  }
}
